<template>
  <div ref="cardComponent" class="homeCardComponent">
    <div class="top">
      <span class="fs22" :style="{ color: `rgb(${color})` }">{{ props.title }}</span>
      <span
        class="today"
        :style="{ color: `rgb(${props.color})`, borderColor: `rgb(${props.todayColor})` }"
        >今日</span
      >
    </div>
    <div class="nums" :style="{ color: `rgb(${props.color})` }">{{ props.cardData.nums }}</div>
    <div class="footer">
      <div class="item">
        <div class="precent">
          周环比
          <span
            class="precent"
            :class="{
              redP: props.cardData.precent > 0,
              greenP: props.cardData.precent < 0
            }"
          >
            {{ props.cardData.precent || 0 }}%
          </span>
          <span v-if="props.cardData.precent > 0" class="triangle up"></span>
          <span v-if="props.cardData.precent < 0" class="triangle down"></span>
        </div>
      </div>
      <div class="item">
        <span>昨日数据</span>
        <span>{{ props.cardData.lastNums }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, withDefaults, defineProps } from 'vue'

  interface CardData {
    nums: string | number
    precent: number
    lastNums: string | number
  }

  interface HomeCardProps {
    cardData?: CardData
    title?: string
    nums?: number
    precent?: number
    lastNums?: number
    color?: string
    backgroundColor?: string
    todayColor?: string
  }

  const cardComponent = ref<HTMLElement | null>(null)
  const props = withDefaults(defineProps<HomeCardProps>(), {
    cardData: () => ({
      nums: '',
      precent: 0,
      lastNums: ''
    }),
    title: '',
    nums: 0,
    precent: 0,
    lastNums: 0,
    color: undefined,
    backgroundColor: undefined,
    todayColor: undefined
  })

  onMounted(() => {
    if (cardComponent.value && props.backgroundColor) {
      cardComponent.value.style.backgroundColor = `rgb(${props.backgroundColor})`
    }
  })
</script>

<style lang="scss" scoped>
  .homeCardComponent {
    padding: 15px;
    display: inline-flex;
    flex-direction: column;
    min-width: 200px;
    min-height: 200px;
    border-radius: 16px;
    background-color: var(--art-main-bg-color);

    .top {
      font-size: 22px;
      margin: 12px 0 12px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .today {
        font-size: 14px;
        padding: 8px 16px;
        border: 1px solid;
        border-radius: 4px;
      }
    }

    .nums {
      margin: 8px;
      font-size: 48px;
    }

    .footer {
      height: 115px;
      font-size: 16px;
      padding: 12px 0;
      border-radius: 8px;
      background-color: var(--art-gray-100);
      box-shadow: 0px 10px 20px 1px rgba(27, 85, 175, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .item {
        margin: 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--art-text-color-regular);

        .precent {
          $red: #d04a41;
          $green: #427a0a;

          span {
            margin-left: 18px;
          }

          .redP {
            color: $red;
          }

          .greenP {
            color: $green;
          }

          .triangle {
            width: 0;
            height: 0;
            position: relative;
            border: 8px solid;
          }

          .up {
            position: relative;
            top: -12px;
            border-color: transparent transparent $red transparent;
          }

          .down {
            position: relative;
            top: 12px;
            border-color: $green transparent transparent transparent;
          }
        }
      }
    }

    /* 移动端适配 - 确保卡片占满宽度 */
    @media screen and (max-width: $device-ipad-pro) {
      width: 100%;
      min-width: auto;
      display: flex;
      box-sizing: border-box;
      
      .top {
        font-size: 20px;
        margin: 10px 0 10px 10px;
        max-width: 100%;
        
        .today {
          font-size: 13px;
          padding: 6px 12px;
          max-width: 100%;
          box-sizing: border-box;
        }
      }
      
      .nums {
        font-size: 40px;
      }
      
      .footer {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        
        .item {
          margin: 0 8px;
          font-size: 14px;
          max-width: 100%;
          
          .precent span {
            margin-left: 12px;
          }
        }
      }
    }

    @media screen and (max-width: $device-ipad-vertical) {
      padding: 12px;
      box-sizing: border-box;
      
      .top {
        font-size: 18px;
        margin: 8px 0 8px 8px;
        max-width: 100%;
        
        .today {
          max-width: 100%;
          box-sizing: border-box;
        }
      }
      
      .nums {
        font-size: 36px;
        margin: 6px;
      }
      
      .footer {
        height: 90px;
        font-size: 13px;
        box-sizing: border-box;
        
        .item {
          margin: 0 6px;
          max-width: 100%;
          
          .precent span {
            margin-left: 8px;
          }
        }
      }
    }

    @media screen and (max-width: $device-phone) {
      padding: 10px;
      min-height: auto;
      box-sizing: border-box;
      
      .top {
        font-size: 16px;
        margin: 6px 0 6px 6px;
        max-width: 100%;
        
        .today {
          font-size: 12px;
          padding: 4px 10px;
          max-width: 100%;
          box-sizing: border-box;
        }
      }
      
      .nums {
        font-size: 32px;
        margin: 4px;
      }
      
      .footer {
        height: 80px;
        padding: 8px 0;
        font-size: 12px;
        box-sizing: border-box;
        
        .item {
          margin: 0 4px;
          max-width: 100%;
          
          .precent span {
            margin-left: 6px;
          }
        }
      }
    }
  }
</style>
